<template>
	<div class="j-grouphonor">
		<div class="container">
			<div class="module-title text-center">
				<span class="title-ch">集团荣誉</span><br>
				<span class="title-en">GROUP HONOR</span>
			</div>
			<swiper :options="swiperOption" class="gh-swiper">
				<swiper-slide class="swiper-slide-list add_list_ii">
					<ul class="gh-img-ul text-center clearfix" style="margin-bottom: 0;">
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh01.png"></span>
							</div>
							<!--<div class="gh-jp-txt">高新技术企业证书（中国干细胞集团上海生物科技有限公司）</div>-->
							<div class="gh-jp-txt">高新技术企业证书</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh02.png"></span>
							</div>
							<div class="gh-jp-txt">创新型企业</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh03.png"></span>
							</div>
							<div class="gh-jp-txt">上海高新技术成果转化证书（间充质干细胞保存和技术服务）</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh04.png"></span>
							</div>
							<div class="gh-jp-txt">2016年上海市高新技术成果转化百佳</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh05.png"></span>
							</div>
							<div class="gh-jp-txt">上海市科技小巨人企业</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh06.png"></span>
							</div>
							<div class="gh-jp-txt">上海科普教育基地</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh07.png"></span>
							</div>
							<div class="gh-jp-txt">干细胞科普教育基地2014年度先进集体</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh08.png"></span>
							</div>
							<div class="gh-jp-txt">2015-2016年度上海市文明单位</div>
						</li>
					</ul>
				</swiper-slide>
				<swiper-slide class="swiper-slide-list add_list_ii">
					<ul class="gh-img-ul text-center clearfix" style="margin-bottom: 0;">
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh09.png"></span>
							</div>
							<div class="gh-p-back"></div>
							<div class="gh-jp-txt">上海市五一劳动奖状</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh10.png"></span>
							</div>
							<div class="gh-p-back"></div>
							<div class="gh-jp-txt">上海市两新组织先进基层党组织</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh11.png"></span>
							</div>
							<div class="gh-p-back"></div>
							<div class="gh-jp-txt">2017-2019年度上海市著名商标</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh12.png"></span>
							</div>
							<div class="gh-p-back"></div>
							<div class="gh-jp-txt">上海企业文化创新优秀品牌</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh13.png"></span>
							</div>
							<div class="gh-p-back"></div>
							<div class="gh-jp-txt">上海市工业旅游景点服务质量达标单位</div>
						</li>
						<li>
							<div class="gh-position">
								<span><img src="../assets/certificate/gh14.png"></span>
							</div>
							<div class="gh-p-back"></div>
							<div class="gh-jp-txt">先进基层党组织</div>
						</li>
					</ul>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>
<script>
export default {
  name: 'carrousel',
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        slidesPerView: 1,
        slidesPerGroup: 1
        // autoplay: {
	      // delay: 4000
        // }
      },
      swiperSlides: [1, 2]
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss">
	.j-grouphonor{
		margin-bottom: 40px;
		.container{
			padding: 0;
		}
		.gh-swiper{
			.swiper-slide-list{
				padding: 8px;
				margin-bottom: 50px;
				.gh-img-ul{
					li{
						float: left;
						width: 25%;
						padding: 0 17px;
						margin-bottom: 18px;
						.gh-position{
							/*height: 200px;*/
							display: table;
							margin: 0 auto;
							border: 1px solid  #ddd;
							width: 100%;
							/*padding: 5px;*/
							span {
								display: table-cell;
								vertical-align: middle;
								img{
									max-width: 100%;
									/*max-height: 188px;*/
									height: 170px;
									display: inline;
								}
							}
						}
						.gh-jp-txt{
							color: #333;
							text-align: center;
							padding: 0 5px;
							margin-top: 10px;
							height: 66px;
						}
					}
				}
			}
		}
		.swiper-pagination-bullet {
			width: 15px;
			height: 15px;
			display: inline-block;
			border-radius: 100%;
			background: none;
			opacity: 1;
			border: 2px solid #02adef;
		}
		.swiper-pagination-bullet-active {
			opacity: 1;
			background: #02adef;
			border: none;
		}
		.swiper-slide-next + .swiper-slide{
			padding: 8px 0 8px 16px;
		}
		.swiper-slide-active{
			padding: 8px 16px 8px 0!important;
		}
	}
	@media (max-width: 767px){
		.j-grouphonor{
			margin-bottom: 40px!important;
			.container{
				padding: 0 15px!important;
			}
			.gh-swiper{
				.swiper-slide-list{
					padding: 8px;
					.gh-img-ul{
						li{
							padding: 0 3px;
							margin-bottom: 10px;
							.gh-position{
								span {
									img{
										height: 60px;
									}
								}
							}
							.gh-jp-txt{
								font-size: 12px;
								height: 66px;
								padding: 0 1px;
								overflow: hidden;
							}
						}
					}
				}
			}
		}
		.j-grouphonor .gh-swiper .swiper-slide-list {
			padding: 5px!important;
			margin-bottom: 50px;
		}
		.gb-box {
			.gb-text{
				font-size: 13px!important;
				color: #000;
				margin: 10px 0 5px 0!important;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap : break-word;
			}
		}
	}
</style>
